<html>
<head>
	<link href="StyleSheets/gadgets.css" rel="stylesheet"/>
	<link href="StyleSheets/container.css" rel="stylesheet"/>
	<link href="StyleSheets/temp_styles.css" rel="stylesheet"/>
	<script src="Scripts/yui/yahoo/yahoo-min.js" type="text/javascript"></script>
	<script src="Scripts/yui/dom/dom-min.js" type="text/javascript"></script>
	<script src="Scripts/yui/event/event-min.js" type="text/javascript"></script>
	<script src="Scripts/yui/utilities/utilities.js" type="text/javascript"></script>
	<script src="Scripts/yui/dragdrop/dragdrop-min.js" type="text/javascript"></script>
	<script src="Scripts/container/json.js" type="text/javascript"></script>
	<script src="Scripts/container/ifpc.js" type="text/javascript"></script>
	<script src="Scripts/container/cookies.js" type="text/javascript"></script>
	<script src="Scripts/container/gadgets.js" type="text/javascript"></script>
</head>
<body>
	<div class="workarea" style="width:33%; float:left;">
	  <h3>List 1</h3>
	  <div id="ul1" class="draglist">
	    <div class="list1" id="li1_1">list 1, item 1</div>
	    <div class="gadget" id="gadget2"><div class="gadgets-gadget-title-bar"><span class="gadgets-gadget-title" id="remote_module_1_title">Arun B</span> | <span class="gadgets-gadget-title-button-bar"><a onclick="gadgets.container.getGadget(1).refresh()" href="#">Refresh</a> | <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(1).handleOpenUserPrefsDialog()" href="#">settings</a> <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(1).handleToggle()" href="#">toggle</a></span></div><div class="gadgets-gadget-user-prefs-dialog" id="remote_module_1_userPrefsDialog"></div><div class="gadgets-gadget-content"><iframe scrolling="no" frameborder="0" src="http://127.0.0.1:8080/gadgets/ifr?url=http%3A%2F%2Flocalhost%2FiGoogle%2Fxml%2FSetTitle3.xml&synd=gadgets&mid=0&parent=&ogc=localhost" class="gadgets-gadget" name="remote_module_1" id="remote_module_1"></iframe></div></div>
	    <div class="list1" id="li1_2">list 1, item 2</div>
	    <div class="list1" id="li1_3">list 1, item 3</div>
	    <div class="gadget" id="gadget1"><div class="gadgets-gadget-title-bar"><span class="gadgets-gadget-title" id="remote_module_3_title">Arun B</span> | <span class="gadgets-gadget-title-button-bar"><a onclick="gadgets.container.getGadget(3).refresh()" href="#">Refresh</a> | <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(3).handleOpenUserPrefsDialog()" href="#">settings</a> <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(3).handleToggle()" href="#">toggle</a></span></div><div class="gadgets-gadget-user-prefs-dialog" id="remote_module_3_userPrefsDialog"></div><div class="gadgets-gadget-content"><iframe scrolling="no" frameborder="0" src="http://127.0.0.1:8080/gadgets/ifr?url=http%3A%2F%2Flocalhost%2FiGoogle%2Fxml%2FSetTitle3.xml&synd=gadgets&mid=0&parent=&ogc=localhost" class="gadgets-gadget" name="remote_module_3" id="remote_module_3"></iframe></div></div>
	  </div>
	</div>
	
	<div class="workarea">
	  <h3>List 2</h3>
	  <div id="ul2" class="draglist">
	    <div class="list2" id="li2_1">list 2, item 1</div>
	    <div class="list2" id="li2_2">list 2, item 2</div>
	    <div class="list2" id="li2_3">list 2, item 3</div>
	    <div class="gadget" id="gadget"><div class="gadgets-gadget-title-bar"><span class="gadgets-gadget-title" id="remote_module_3_title">Arun B</span> | <span class="gadgets-gadget-title-button-bar"><a onclick="gadgets.container.getGadget(3).refresh()" href="#">Refresh</a> | <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(3).handleOpenUserPrefsDialog()" href="#">settings</a> <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(3).handleToggle()" href="#">toggle</a></span></div><div class="gadgets-gadget-user-prefs-dialog" id="remote_module_3_userPrefsDialog"></div><div class="gadgets-gadget-content"><iframe scrolling="no" frameborder="0" src="http://127.0.0.1:8080/gadgets/ifr?url=http%3A%2F%2Flocalhost%2FiGoogle%2Fxml%2FSetTitle3.xml&synd=gadgets&mid=0&parent=&ogc=localhost" class="gadgets-gadget" name="remote_module_3" id="remote_module_3"></iframe></div></div>
	  </div>
	</div>
	
	
	<script type="text/javascript">
	
	(function() {
	
	var Dom = YAHOO.util.Dom;
	var Event = YAHOO.util.Event;
	var DDM = YAHOO.util.DragDropMgr;
	
	//////////////////////////////////////////////////////////////////////////////
	// example app
	//////////////////////////////////////////////////////////////////////////////
	YAHOO.example.DDApp = {
	    init: function() {
	        var rows=3,cols=2,i,j;
	        for (i=1;i<cols+1;i=i+1) {
	            new YAHOO.util.DDTarget("ul"+i);
	        }
	
	        for (i=1;i<cols+1;i=i+1) {
	            for (j=1;j<rows+1;j=j+1) {
	                new YAHOO.example.DDList("li" + i + "_" + j);
	            }
	        }
	        
	        new YAHOO.example.DDList("gadget");
	        new YAHOO.example.DDList("gadget1");
	        new YAHOO.example.DDList("gadget2");
	
	        Event.on("showButton", "click", this.showOrder);
	        Event.on("switchButton", "click", this.switchStyles);
	    },
	
	    showOrder: function() {
	        var parseList = function(ul, title) {
	            var items = ul.getElementsByTagName("li");
	            var out = title + ": ";
	            for (i=0;i<items.length;i=i+1) {
	                out += items[i].id + " ";
	            }
	            return out;
	        };
	
	        var ul1=Dom.get("ul1"), ul2=Dom.get("ul2");
	        alert(parseList(ul1, "List 1") + "\n" + parseList(ul2, "List 2"));
	
	    },
	
	    switchStyles: function() {
	        Dom.get("ul1").className = "draglist_alt";
	        Dom.get("ul2").className = "draglist_alt";
	    }
	};
	
	//////////////////////////////////////////////////////////////////////////////
	// custom drag and drop implementation
	//////////////////////////////////////////////////////////////////////////////
	
	YAHOO.example.DDList = function(id, sGroup, config) {
	
	    YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
	
	    this.logger = this.logger || YAHOO;
	    var el = this.getDragEl();
	    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
	
	    this.goingUp = false;
	    this.lastY = 0;
	};
	
	YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
	
	    startDrag: function(x, y) {
	        this.logger.log(this.id + " startDrag");
	
	        // make the proxy look like the source element
	        var dragEl = this.getDragEl();
	        var clickEl = this.getEl();
	        Dom.setStyle(clickEl, "visibility", "hidden");
	
	        dragEl.innerHTML = clickEl.innerHTML;
	
	        Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
	        Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
	        Dom.setStyle(dragEl, "border", "2px solid gray");
	    },
	
	    endDrag: function(e) {
	
	        var srcEl = this.getEl();
	        var proxy = this.getDragEl();
	
	        // Show the proxy element and animate it to the src element's location
	        Dom.setStyle(proxy, "visibility", "");
	        var a = new YAHOO.util.Motion( 
	            proxy, { 
	                points: { 
	                    to: Dom.getXY(srcEl)
	                }
	            }, 
	            0.2, 
	            YAHOO.util.Easing.easeOut 
	        )
	        var proxyid = proxy.id;
	        var thisid = this.id;
	
	        // Hide the proxy and show the source element when finished with the animation
	        a.onComplete.subscribe(function() {
	                Dom.setStyle(proxyid, "visibility", "hidden");
	                Dom.setStyle(thisid, "visibility", "");
	            });
	        a.animate();
	    },
	
	    onDragDrop: function(e, id) {
	
	        // If there is one drop interaction, the li was dropped either on the list,
	        // or it was dropped on the current location of the source element.
	        if (DDM.interactionInfo.drop.length === 1) {
	
	            // The position of the cursor at the time of the drop (YAHOO.util.Point)
	            var pt = DDM.interactionInfo.point; 
	
	            // The region occupied by the source element at the time of the drop
	            var region = DDM.interactionInfo.sourceRegion; 
	
	            // Check to see if we are over the source element's location.  We will
	            // append to the bottom of the list once we are sure it was a drop in
	            // the negative space (the area of the list without any list items)
	            if (!region.intersect(pt)) {
	                var destEl = Dom.get(id);
	                var destDD = DDM.getDDById(id);
	                destEl.appendChild(this.getEl());
	                destDD.isEmpty = false;
	                DDM.refreshCache();
	            }
	
	        }
	    },
	
	    onDrag: function(e) {
	
	        // Keep track of the direction of the drag for use during onDragOver
	        var y = Event.getPageY(e);
	
	        if (y < this.lastY) {
	            this.goingUp = true;
	        } else if (y > this.lastY) {
	            this.goingUp = false;
	        }
	
	        this.lastY = y;
	    },
	
	    onDragOver: function(e, id) {
	    
	        var srcEl = this.getEl();
	        var destEl = Dom.get(id);
	
	        // We are only concerned with list items, we ignore the dragover
	        // notifications for the list.
	        if (destEl.nodeName.toLowerCase() == "div") {
	            var orig_p = srcEl.parentNode;
	            var p = destEl.parentNode;
	
	            if (this.goingUp) {
	                p.insertBefore(srcEl, destEl); // insert above
	            } else {
	                p.insertBefore(srcEl, destEl.nextSibling); // insert below
	            }
	
	            DDM.refreshCache();
	        }
	    }
	});
	
	Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
	
	})();
	</script>
</body>
</html>